<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--主要依赖 begin-->
    <script src="../../../bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="../../../bower_components/jquery-validation/dist/jquery.validate.js" type="text/javascript"></script>
    <script src="../../../global/plugins/jquery-validation/validate-methods.js" type="text/javascript"></script>
    <script src="../../../global/scripts/util.js" type="text/javascript"></script>
    <!--国际化-->
    <!--插件原国际化文件-->
    <script src="../../../bower_components/jquery-validation/src/localization/messages_zh.js" type="text/javascript"></script>
    <!--通用自定义校验国际化-->
    <script src="../../../global/plugins/jquery-validation/i18n/message.zh_CN.js" type="text/javascript"></script>
    <!--主要依赖 end-->

    <!--其他依赖-->
    <script src="../../../global/plugins/autoComplete/autoComplete.min.js" type="text/javascript"></script>
    <script src="../../../global/scripts/changeselect.js" type="text/javascript"></script>

    <script src="../../../bower_components/ckeditor/ckeditor.js" type="text/javascript"></script>

    <link href="../../../bower_components/select2/select2.css" rel="stylesheet" type="text/css"/>
    <script src="../../../bower_components/select2/select2.min.js" type="text/javascript"></script>

</head>
<body>
<h1>注意：input的name必须写且不能重复，否则校验不生效 </h1>
<h3>框架中的校验需要在需要校验的控件（如input）的父元素加入"form-group"样式，这样在校验结果错误的时才能显示红色提示文字，具体可参考webapp\src\main\webapp\template\core\security\user\addUser.html</h3>
<form id="testForm">
    <h2>input部分</h2>
    <h3>自带校验</h3>
    必填：<input type="text" name="required" id="test" required/><br/><br/>
    与id为test的input相等equalTo:<input type="text" name="equalTo" equalTo="#test"/><br/><br/>
    email：<input type="text" name="email" email="true"/><br/><br/>
    url:<input type="text" name="url" url="true"/><br/><br/>
    长度大于等于2:<input type="text" name="minlength" minlength="2"/><br/><br/>
    长度小于等于5:<input type="text" name="maxlength" maxlength="5"/><br/><br/>
    长度小于等于6，大于等于2:<input type="text" name="rangelength" rangelength="2, 6"/><br/><br/>
    数字最小值大于等于2:<input type="text" name="min" min="2"/><br/><br/>
    数字最大值小于等于13:<input type="text" name="max" max="13"/><br/><br/>
    数字范围2-13闭区间:<input type="text" name="range" range="2,13"/><br/><br/>
    <h3>自定义校验</h3>
    必须从自动完成中选择：<input type="text" name="autoCompleteRequired" autoCompleteRequired="true"/><br/><br/>
    num方法注意事项：在js中使用此校验时，参数需要写成<span style="color:red">字符串格式,且两个参数使用英文逗号‘,’分隔</span>，如：input1:{num:"4,2"}<br/><br/>
    数字，整数部分4位，小数部分2位:<input type="text" name="num1" num="4,2"/><br/><br/>
    数字，整数部分4位，无小数:<input type="text" name="num2" num="4,0" /><br/><br/>
    数字，整数部分为0，小数部分2位:<input type="text" name="num3" num="0,2" /><br/><br/>
    开始时间小于结束时间:开始时间<input type="text" value="2015-01-01" name="beginTime" id="beginTime"/>
    结束时间<input type="text" value="2014-01-01" name="endTime" afterBeginTime="#beginTime"/><br/><br/>
    必须为中文<input type="text" name="regExp_chinese" required regExp_chinese="true"/><br/>

    <hr/>
    <h2>其他控件部分</h2>

    右侧select不能为空：<select id="originalSelect" multiple style="height:200px;width:100px">
    <option>aaaaaa</option>
    <option>bbbbbb</option>
    <option>cccccc</option>
    <option>dddddd</option>
    <option>eeeeee</option>
</select>
    <input type="button" onclick="changeSelect('originalSelect','targetSelect')" value=">>"/>
    <input type="button" onclick="changeSelectAll('originalSelect','targetSelect')" value=">>>"/>
    <input type="button" onclick="changeSelect('targetSelect','originalSelect')" value="<<"/>
    <input type="button" onclick="changeSelectAll('targetSelect','originalSelect')" value="<<<"/>
    <select id="targetSelect" multiple style="height:200px;width: 100px;" optionRequired="true"></select><br/><br/>

    下拉必选
    <select name="select" required>
        <option value="">Select...</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
        <option value="Option 4">Option 4</option>
    </select><br/><br/>
    单选必选 ：<span style="color:red">特别说明:</span>input 父节点必选含有class="radio-list" data-error-container="#form"  错误提示放在了 div id="form"
    <div class="radio-list" data-error-container="#form_2_membership_error">
        <input type="radio" name="radio_required" value="1" required/> Fee
        <input type="radio" name="radio_required" value="2"/>Professional
    </div>
    <div id="form_2_membership_error"></div>
    复选框必选：<span style="color:red">特别说明:</span>input 父节点必选含有class="checkbox-list" data-error-container="#form"  错误提示放在了 div id="form"
    <div class="checkbox-list" data-error-container="#form_1_services_error">
        <input type="checkbox" value="1" name="checkbox_required" required/> Service 1
        <input type="checkbox" value="2" name="checkbox_required"/> Service 2
        <input type="checkbox" value="3" name="checkbox_required"/> Service 3
    </div>
    <div id="form_1_services_error"></div>

    复选框至少选两个校验：<span style="color:red">特别说明:</span>input 父节点必选含有class="checkbox-list" data-error-container="#form"  错误提示放在了 div id="form"
    <div class="checkbox-list" data-error-container="#form_2_services_error">
        <input type="checkbox" value="1" name="checkbox_minlength" required minlength="2"/> Service 1
        <input type="checkbox" value="2" name="checkbox_minlength"/> Service 2
        <input type="checkbox" value="3" name="checkbox_minlength"/> Service 3
    </div>
    <div id="form_2_services_error"></div>

    多选校验必填
    <input type="text" style="width:200px;" id="select2_tags" value="" name="select2tags" required><br/><br/>
    多选至少之多选择
    <select multiple name="123" style="height:200px;width:100px" required minlength="2" maxlength="3">
        <option>aaaaaa</option>
        <option>bbbbbb</option>
        <option>cccccc</option>
        <option>dddddd</option>
        <option>eeeeee</option>
    </select><br/><br/>
    CKEditor校验必填 <span style="color:red">特别说明:</span>CKEditor校验需在js  rules中写"name名称":{ required:true }
    <textarea class="ckeditor form-control" name="editor" rows="6" data-error-container="#editor2_error" required></textarea>
    <div id="editor2_error"></div>
    <input type="button" value="submit" id="submitBtn">
</form>
</body>
</html>
<script>
    $(function(){
        $.gAuto();
        $("#select2_tags").select2({
            tags: ["red", "green", "blue", "yellow", "pink"]
        });
        $("#submitBtn").click(function(){
            console.log("校验结果："+$("#testForm").validate({
                ignore: "", // validate all fields including form hidden input
                rules:{
                    equalTo:{
                        equalTo:"#test"
                    },
                    editor:{
                        required:true
                    }
                },
                errorPlacement: function (error, element) { // render error placement for each input type
                    if (element.attr("data-error-container")) {
                        error.appendTo(element.attr("data-error-container"));
                    }else if (element.parents('.radio-list').size() > 0) {
                        error.appendTo(element.parents('.radio-list').attr("data-error-container"));
                    }else if (element.parents('.checkbox-list').size() > 0) {
                        error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
                    }else {
                        error.insertAfter(element); // for other inputs, just perform default behavior
                    }
                }
            }).form());
        });
    });
</script>